<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
				'Open Sans', 'Helvetica Neue', sans-serif;
			width: 300px;
			padding: 16px;
		}

		.button {
			width: 100%;
			padding: 12px;
			margin: 8px 0;
			border: none;
			border-radius: 4px;
			background-color: #4285f4;
			color: white;
			font-size: 14px;
			cursor: pointer;
			transition: background-color 0.2s;
		}

		.button:hover {
			background-color: #3367d6;
		}

		.button:disabled {
			background-color: #ccc;
			cursor: not-allowed;
		}

		.title {
			font-size: 18px;
			font-weight: 500;
			margin-bottom: 16px;
			color: #202124;
		}

		.description {
			font-size: 14px;
			color: #5f6368;
			margin-bottom: 24px;
		}

		.section {
			margin-bottom: 24px;
		}

		.section-title {
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 8px;
			color: #202124;
		}

		textarea {
			width: 100%;
			min-height: 100px;
			padding: 8px;
			margin: 8px 0;
			border: 1px solid #dadce0;
			border-radius: 4px;
			font-family: inherit;
			font-size: 14px;
			resize: vertical;
		}

		textarea:focus {
			outline: none;
			border-color: #4285f4;
		}

		.message {
			position: fixed;
			bottom: 16px;
			left: 16px;
			right: 16px;
			padding: 12px;
			border-radius: 4px;
			font-size: 14px;
			animation: slideIn 0.3s ease-out;
			z-index: 1000;
		}

		.message.success {
			background-color: #e6f4ea;
			color: #137333;
			border: 1px solid #137333;
		}

		.message.error {
			background-color: #fce8e6;
			color: #c5221f;
			border: 1px solid #c5221f;
		}

		@keyframes slideIn {
			from {
				transform: translateY(100%);
				opacity: 0;
			}

			to {
				transform: translateY(0);
				opacity: 1;
			}
		}
	</style>
</head>

<body>
	<h1 class="title">Reject Cookies</h1>
	<p class="description">
		Help improve the extension by reporting issues with cookie blocking or bugs you encounter.
	</p>

	<div class="section">
		<button id="reportCookies" class="button">Cookies not rejected on current page</button>
	</div>

	<div class="section">
		<h2 class="section-title">Report a Bug</h2>
		<textarea id="bugDescription" placeholder="Please describe the issue you're experiencing..."></textarea>
		<button id="reportBug" class="button">Submit Bug Report</button>
	</div>

	<script src="sidepanel.js"></script>
</body>

</html>